<template>
  <div class="data-model-view">
    <h1>数据模型</h1>
    <div class="model-table-container">
      <table>
        <thead>
          <tr>
            <th>表名</th>
            <th>行数</th>
            <th>平均行长度 (字节)</th>
            <th>数据长度 (字节)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="model in models" :key="model.table_name">
            <td>{{ model.table_name }}</td>
            <td>{{ model.row_count }}</td>
            <td>{{ model.avg_row_length }}</td>
            <td>{{ model.data_length }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { getDataModels } from "@/api/postbar.ts";

export default defineComponent({
  name: "DataModelView",
  setup() {
    const models = ref([]);

    const fetchDataModels = async () => {
      try {
        const response = await getDataModels();
        models.value = response.data;
      } catch (error) {
        console.error("获取数据模型信息失败", error);
      }
    };

    onMounted(() => {
      fetchDataModels();
    });

    return { models };
  },
});
</script>

<style scoped>
.data-model-view {
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.model-table-container {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f7f7f7;
}

thead th {
  padding: 10px;
  font-size: 16px;
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

tbody tr:nth-child(even) {
  background-color: #f1f1f1;
}

td {
  padding: 10px;
  font-size: 14px;
  text-align: left;
}

td:first-child {
  font-weight: bold;
  color: #333;
}

</style>
